{{define "books/new"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.16.2/all.fine-uploader/all.fine-uploader.min.js"
    integrity="sha256-v9au6P0m49eWQchR2OL5FlsBznSOwtpDphH1Mg9XJrw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.16.2/all.fine-uploader/fine-uploader-gallery.min.css"
    integrity="sha256-kpkbsX+nDRw9KkbbvG1cZj4uw67QM8y5pVNNk3uTRXo=" crossorigin="anonymous" />

<section class="upload-container">
    <div id="fine-uploader-gallery"></div>
</section>

<style>
    .upload-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #fine-uploader-gallery {
        background-color: white;
    }
    @media only screen and (max-width: 600px) {
        #fine-uploader-gallery {
            width: 90%;
        }
    }

    @media only screen and (min-width: 601px) {
        #fine-uploader-gallery {
            min-width: 400px;
        }
    }    
</style>
{{template "fine-uploader"}}
<script>
    var galleryUploader = new qq.FineUploader({
        element: document.getElementById("fine-uploader-gallery"),
        template: 'qq-template',
        request: {
            endpoint: '/u/{{.List.ID}}/books/new'
        },
        chunking: {
            concurrent: {
                enabled: true
            },
            enabled: true,
            success: {
                endpoint: "/u/{{.List.ID}}/books/new/chunksdone"
            }
        },
        validation: {
            allowedExtensions: ['epub'],
            sizeLimit: 128 * 1024 * 1024,
        },
        callbacks: {
            onAllComplete: function(lucky, unlucky) {
                if (unlucky.length === 0) {
                    setTimeout(function() {
                        location.reload()
                    }, 1000)
                }
            },
        },
    });
</script>
{{end}}